import React, { Component } from 'react'
import Hello from './components/Hello'
import Swiper from 'swiper'
// import 'swiper/swiper.css'

export default class App extends Component {
  constructor(props) {
    super(props)
    console.log('App-constructor')
    /**
     * 任务 
       * 1.通过super将绑定在自己身上的属性赋值给this.props  this.props = props
       * 2.state的定义 
       * 3.this.fn = this.fn.bind(this)
     */
    this.state = {
      count: 1,
      list: []
    }
  }
  UNDAFE_componentWillMount () {
    console.log('App-componentWillMount')
    /**
     * 表示组件挂在前的准备
     */
  }
  render () {
    console.log('App-render')
    /**
     * 任务
     *   1. 解析 this.state 和 this.peops
     *   2. jsx -> vdom对象模型
     */
    const { list } = this.state
    return (
      <div>
        <Hello></Hello>
        {list.map(item => <div key={item.id}> {item.d_title}</div>)}
        <hr />
        <hr />
        <hr />
        <div className="swiper">
          <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
          </div>

          <div className="swiper-pagination"></div>

          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>

          <div className="swiper-scrollbar"></div>
        </div>
      </div>
    )
  }
  componentDidMount () {
    /**
     * 挂载结束
       *1. 数据请求,数据赋值
       *2. 真实dom有了,可以做第三方实例化 
     */
    // fetch('url')
    //   .then(res => res.json)
    //   .then(data => {
    //     this.setState({
    //       list: data.data.xxx
    //     })
    //   }).catch(error => Promise.reject(error))

    var mySwiper = new Swiper('.swiper', {
      direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
    console.log('App-componentDidMount')
  }
}


